import { Dialog } from '@nutui/nutui-taro'
import type { BaseEventOrig, ButtonProps } from '@tarojs/components'
import { Button, View } from '@tarojs/components'
import Taro, { useShareAppMessage } from '@tarojs/taro'
import { defineComponent, ref } from 'vue'

import styles from './index.module.css'

export default defineComponent({
  name: 'MyPage',
  setup() {
    const latitude = ref(0)
    const longitude = ref(0)
    const showModal = ref(false)

    function handleOpenSetting(
      e: BaseEventOrig<ButtonProps.onOpenSettingEventDetail>
    ) {
      console.log(e)
    }

    function handleGetUserProfile() {
      Taro.getUserProfile({
        desc: '获取用户信息',
        success: res => {
          console.log(res)
        }
      })
    }

    function handleGetUserPhone(
      e: BaseEventOrig<ButtonProps.onGetPhoneNumberEventDetail>
    ) {
      console.log(e)
    }

    function handleGetLocation() {
      Taro.getLocation({
        success: res => {
          console.log(res)

          latitude.value = res.latitude
          longitude.value = res.longitude
        }
      })
    }

    function handleOpenLocation() {
      Taro.openLocation({
        latitude: latitude.value,
        longitude: longitude.value
      })
    }

    function handleContact(e: BaseEventOrig<ButtonProps.onContactEventDetail>) {
      console.log(e)
    }

    function handleShowModal() {
      showModal.value = true
    }

    useShareAppMessage(res => {
      return {
        title: '测试分享',
        path: '/pages/index/index',
        imageUrl: '/static/logo-taro.png'
      }
    })

    return {
      showModal,
      handleOpenSetting,
      handleGetUserProfile,
      handleGetUserPhone,
      handleGetLocation,
      handleOpenLocation,
      handleContact,
      handleShowModal
    }
  },
  render() {
    return (
      <View class={styles.view}>
        <Button
          class={styles.btn}
          openType="openSetting"
          onOpensetting={this.handleOpenSetting}
        >
          打开权限配置
        </Button>
        <Button class={styles.btn} onTap={this.handleGetUserProfile}>
          获取用户信息
        </Button>
        <Button
          class={styles.btn}
          openType="getPhoneNumber"
          onGetphonenumber={this.handleGetUserPhone}
        >
          获取用户手机
        </Button>
        <Button class={styles.btn} onTap={this.handleGetLocation}>
          获取定位
        </Button>
        <Button class={styles.btn} onTap={this.handleOpenLocation}>
          地图定位
        </Button>
        <Button
          class={styles.btn}
          openType="contact"
          onContact={this.handleContact}
        >
          联系客服
        </Button>
        <Button class={styles.btn} openType="share">
          分享页面
        </Button>
        <Button class={styles.btn} onTap={this.handleShowModal}>
          打开弹窗
        </Button>
        <Dialog v-model={[this.showModal, 'visible']} content="弹窗内容" />
      </View>
    )
  }
})
